<template>
	<view class="" :style="[AppSkinVar]">
		<e-loading-page :loading="loading"  >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<scroll-view class="scroll-box" scroll-y lower-threshold="60"
			v-if="countryAreaList && countryAreaList.length">
			<view class="e-flex e-flex-between e-p-30" v-for="item in countryAreaList" :key="item.id" @tap="handleClick(item)">
				<view class="e-flex">
					<image :src="item.logo" class="img-36 e-m-r-10" mode=""></image>
					<text>{{item.countryName}}</text>
				</view>
				<view class="">
					+{{item.countryArea}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import type {CountryAreaItem} from '@/common/request/api'
	import {useCurrentInstance} from '@/common/hooks'
	import {  useUser } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	
	const ctx = useCurrentInstance()
	
	const userStore = useUser()
	const { countryAreaList } = storeToRefs(userStore)
	
	const loading = ref(true)
	userStore.getCountryAreaList().finally(() => {
		loading.value = false
	})
	
	const handleClick = (item:CountryAreaItem) => {
		userStore.setCountryArea(item)
		ctx.$back()
	}
</script>

